<template>
  <div class="app-container">
    <div class="dms-app-container">
      <!-- 项目列表-》点击树进行懒加载接口 -->
      <div class="inter-left">
        <el-card shadow="never">
          <div class="box-style">
            <el-tree
              :props="defaultProps"
              empty-text="暂无数据"
              lazy
              :load="loadNode"
              @node-click="handleNodeClick"
              ref="dmsTree"
              node-key="id"
              :default-expanded-keys="expandedKey"
              :highlight-current="true"
              :current-node-key="nodeKey"
            >
              <span
                class="custom-tree-node"
                slot-scope="{ node, data }"
                @mouseover="showBtn(data)"
                @mouseleave="hiddenBtn(data)"
              >
                <!-- 项目 -->
                <template v-if="data.type === 0">
                  <span
                    style="
                      font-size: 14px;
                      width: 7vw;
                      overflow: hidden;
                      word-break: keep-all;
                      white-space: nowrap;
                      text-overflow: ellipsis;
                    "
                    >{{ node.label }}
                  </span>
                  <span v-if="showAddBtn && btnIndex === data.id">
                    <el-button
                      type="text"
                      @click.stop="addInter(node, data)"
                      style="color: rgb(95, 95, 95)"
                    >
                      添加
                    </el-button>
                  </span>
                </template>
                <!-- 接口 -->
                <template v-else>
                  <div class="dms-node-tree">
                    <div class="dms-node-left">
                      <span
                        v-if="data.method === '1'"
                        style="color: rgb(102, 211, 146)"
                      >
                        GET
                      </span>
                      <span
                        v-if="data.method === '2'"
                        style="color: rgb(250, 196, 65)"
                      >
                        POST
                      </span>
                      <span
                        v-if="data.method === '3'"
                        style="color: rgb(87, 162, 237)"
                      >
                        PUT
                      </span>
                      <span
                        v-if="data.method === '4'"
                        style="color: rgb(95, 95, 95)"
                      >
                        PATCH
                      </span>
                      <span
                        v-if="data.method === '5'"
                        style="color: rgb(236, 121, 114)"
                      >
                        DEL
                      </span>
                    </div>
                    <div class="dms-node-right">
                      <span
                        style="
                          max-width: 120px;
                          min-width: 50px;
                          overflow: hidden;
                          word-break: keep-all;
                          white-space: nowrap;
                          text-overflow: ellipsis;
                        "
                      >
                        {{ node.label }}
                      </span>
                    </div>
                  </div>
                </template>
              </span>
            </el-tree>
          </div>
        </el-card>
      </div>
      <!-- 接口详细信息，可编辑修改 -->
      <div class="inter-right" v-if="showRightContent">
        <RequestData
          :idCollection="idCollection"
          @flashTreeNode="addTreeNode"
        />
      </div>
      <div class="empty-content" v-else>
        <img src="@/assets/images/empty.png" />
        <span style="font-size: 20px; color: #909399">请选择或添加接口</span>
      </div>
    </div>
  </div>
</template>

<script>
import { mapActions, mapState } from "vuex";
import { SimplelistInterface } from "@/api/dmsIms/interface";
import RequestData from "./requestData";

export default {
  name: "InterfaceDetail",
  mounted() {},
  computed: {
    ...mapState({
      simpleProList: (state) => state.prolist.simpleProList,
    }),
  },
  components: {
    RequestData,
  },
  data() {
    return {
      // treeData: [],
      id: "",
      expandedKey: [],
      defaultProps: {
        children: "children",
        label: "label",
        type: "type",
        id: "id",
        isLeaf: "leaf",
        method: "method",
      },
      idCollection: {
        proId: -1,
        interId: -1,
      },
      showAddBtn: false,
      btnIndex: 0,
      showRightContent: false,
      node_had: [],
      resolve_had: "",
      currData: {},
      currNode: {},
      nodeKey: "",
    };
  },
  methods: {
    addTreeNode() {
      if (this.currData.leaf === true) {
        // this.nodeKey = this.currData.id;
        let temp = this.$refs.dmsTree.getNode(this.currData);
        this.expandedKey = [];
        this.loadNode(this.node_had, this.resolve_had);
        this.expandedKey.push(temp.parent.data.id);
        // this.$refs.dmsTree.setCurrentKey(this.currData.id);
      } else {
        this.expandedKey = [];
        this.loadNode(this.node_had, this.resolve_had);
        this.expandedKey.push(this.currData.id);
      }
    },
    // vuex中的actions方法简写方式
    ...mapActions(["getProList"]),
    showBtn(data) {
      this.btnIndex = data.id;
      this.showAddBtn = true;
    },
    hiddenBtn() {
      this.showAddBtn = false;
      this.btnIndex = 0;
    },
    loadNode(node, resolve) {
      if (node.level === 0) {
        this.node_had = node; //这里是关键！在data里面定义一个变量，将node.level == 0的node存起来
        this.resolve_had = resolve; //同上，把node.level == 0的resolve也存起来
        this.node_had.childNodes = [];
        return this.getFirstNode(node, resolve);
      }
      if (node.level === 1) {
        return this.getChildrenNode(node, resolve);
      }
      if (node.level > 1) {
        return resolve([]);
      }
    },
    getFirstNode(node, resolve) {
      this.getProList()
        .then(() => {
          let treeData = [];
          for (let index = 0; index < this.simpleProList.length; index++) {
            treeData.push({
              id: this.simpleProList[index].id,
              label: this.simpleProList[index].proName,
              type: 0,
              leaf: false,
              children: [],
            });
          }
          return treeData;
        })
        .then((res) => {
          resolve(res);
        });
    },
    getChildrenNode(node, resolve) {
      let proId = node.data.id;
      let returnData = [];
      // this.nodeTreeData = [];
      SimplelistInterface(proId)
        .then((response) => {
          response.rows.forEach((elem) => {
            returnData.push({
              id: elem.id,
              label: elem.interName,
              type: 1,
              leaf: true,
              method: elem.interType,
            });
          });
          return returnData;
        })
        .then((res) => {
          resolve(res);
        });
    },
    addInter(treeNode, data) {
      this.currData = data;
      this.currNode = treeNode;
      // treeNode.isCurrent = true;
      this.showRightContent = true;
      this.idCollection.proId = data.id;
      this.idCollection.proName = data.label;
      this.idCollection.interId = -1;
    },
    handleNodeClick(data, node) {
      this.currNode = node;
      // console.log(node);
      // type === 1时，id为接口id，type===0时，id为项目id
      if (data.type === 1) {
        this.showRightContent = true;
        this.idCollection.proId = -1;
        this.idCollection.interId = data.id;
        this.idCollection.interName = data.label;
        this.currData = data;
      }
      if (data.type === 0) {
        this.idCollection.proName = data.label;
      }
    },
  },
};
</script>

<style scope>
.inter-left {
  width: 15vw;
  height: 80vh;
  margin-right: 20px;
}
.inter-right {
  width: 70vw;
  min-width: 800px;
  height: 80vh;
}
.box-style {
  height: 80vh;
  overflow: auto;
}
.custom-tree-node {
  display: flex;
  flex-grow: 1;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  color: black;
}
/* 改变被点击节点背景颜色，字体颜色 */
.el-tree-node:focus > .el-tree-node__content {
  background-color: rgb(237, 237, 237) !important;
  color: #fff !important;
}
/*节点失焦时的背景颜色*/
.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
  background-color: #4a9de7 !important;
  color: #fff !important;
}
.el-select .el-input {
  width: 130px;
}
.input-with-select {
  background-color: rgb(242, 242, 242);
}
.dms-app-container {
  display: flex;
}
.dms-node-tree {
  display: flex;
  align-items: center;
  justify-content: center;
}
.dms-node-left {
  width: 40px;
  margin-right: 2px;
  /* text-align: right; */
  font-size: 10px;
  margin-top: 2px;
}
.dms-node-right {
  display: flex;
}
.dms-input {
  display: flex;
  margin-bottom: 20px;
}
.empty-content {
  display: flex;
  flex-direction: column;
  min-width: 800px;
  width: 70vw;
  height: 80vh;
  justify-content: center;
  align-items: center;
}
</style>
